<template>
  <div class="page-container">
    <!-- 面包屑部分 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>组织中心</el-breadcrumb-item>
        <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
        <el-breadcrumb-item>店铺列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-row class="search-input">
          <el-form-item prop="storeTypes" label="店铺类型：">
            <el-select v-model="filters.storeTypes" placeholder="全部" clearable>
              <el-option label="自营店铺" value="0"></el-option>
              <el-option label="入驻店铺" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="merchantId" label="上级组织：">
            <el-select v-model="filters.merchantId" placeholder="全部" clearable>
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="reviewStatus" label="店铺状态：">
            <el-select v-model="filters.reviewStatus" placeholder="全部" clearable>
              <el-option label="启用" value="0"></el-option>
              <el-option label="停用" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="thirdStoreCode" label="店铺编号：">
            <el-input clearable v-model="filters.thirdStoreCode" placeholder="输入店铺编号"></el-input>
          </el-form-item>
          <el-form-item prop="storeName" label="店铺名称：">
            <el-input clearable v-model="filters.storeName" placeholder="输入店铺名称"></el-input>
          </el-form-item>
          <el-form-item prop="storeLink" label="联系方式：">
            <el-input clearable v-model="filters.storeLink" placeholder="输入商家负责人或手机"></el-input>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              icon="el-icon-search"
              :label="'搜索'"
              type="primary"
              @click="findPage(null)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button :label="'重置'" type="primary" plain @click="reset" />
          </el-form-item>
          <el-form-item>
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :on-success="onSuccess"
              :on-error="onError"
              :multiple="false"
              :show-file-list="false"
              :limit="100"
              :file-list="fileList"
            >
              <kt-button type="primary" :label="'导入'" perms="sys:store:excel" />
            </el-upload>
          </el-form-item>
          <el-form-item>
            <kt-button :label="'下载模板'" type="primary" perms="sys:store:excel" @click="downloadTemplate" />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="toolbar t_r"  >
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <Jic-table
      :height="350"
      :tableList="pageResult"
      :tableHeaderList="filterColumns"
      @findPage="findPage"
      :showBatchDelete="false"
      :showDeleteOperation="false"
      :totalSize="totalSize"
      @handlePageChange="handlePageChange"
      @handleSizeChange="handleSizeChange"
      :showOperation="false"
      :sortable="false"
      :showSelection="false"
      ref="JicTable"
    ></Jic-table>
  </div>
</template>

<script>
import JicTable from "@/components/jicComponentGallery/jicTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import VDistpicker from "v-distpicker";
export default {
  components: {
    JicTable,
    KtButton,
    TableColumnFilterDialog,
    VDistpicker
  },
  data() {
    return {
      addInp: false,
      mask: false,
      totalSize: 0, //初始化列表分页
      reviewFormRules: {
        replyContent: [{ required: true, message: "拒绝原因", trigger: "blur" }]
      },
      reviewForm: {
        reviewReason: "",
        reviewStatus: ""
      },
      reviewFormVisible: false,

      isShow: true,
      showAdd: true,

      content: "",
      editorOption: {
        modules: {
          imageDrop: true
        },
        theme: "snow"
      },
      storeDis: true,
      channelDis: true,
      size: "small",
      filters: {
        merchantId: null,
        storeTypes: null,
        reviewStatus: null,
        thirdStoreCode: null,
        storeName: null,
        storeLink: null,
        businessProvinceId: null,
        businessCityId: null,
        businessRegionId: null,
        storeAddress: null
      },
      columns: [],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: [],
      options: {},
      operation: false, // true:新增, false:编辑
      editDialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,

      shopList: [],
      statusList: [],
      checked: [],
      uploadUrl: "",
      fileList: []
    };
  },
  methods: {
    //省市区联动选择
    selected(data) {
      this.mask = false;
      this.addInp = false;

      this.filters.businessProvinceId = data.province.value;

      this.filters.businessCityId = data.city.value;

      this.filters.businessRegionId = data.area.value;
    },
    initData() {
      this.uploadUrl = this.utils.getManageUrl() + "store/importStoreExcel";
    },
    //输入框验证

    characterVer(e) {
      //汉字验证
      const correct = e.replace(/[^\u4E00-\u9FA5]/g, ""); // 清除除了中文以外的输入的字符

      this.dataForm.storeContactor = correct;
    },
    toAddress() {
      this.mask = true;
      this.addInp = true;
    },

    phoneVer(e) {
      //手机号验证
      let filtered = e.replace(/^0|[^\d]/g, "");
      if (this.dataForm.mobile != filtered) {
        this.$message({ message: "请输入正确的手机号", type: "error" });
        this.dataForm.mobile = "";
      }
    },

    //左右分页点击

    handlePageChange(params) {
      if (params != null && params.number != null) {
        if (params.number != null) {
          this.pageRequest.pageNum = params.number;
        }

        this.findPage();
      }
    },

    // 获取分页数据

    findPage: function(data) {
      /**
       * 子组件传过来的分页参数
       * data.start 当前页
       * data.limit 当前页总条数
       * */
      if (data != null && data.start != null) {
        if (data.start != null) {
          this.pageRequest.pageNum = data.start;
        }
        if (data.limit != null) {
          this.pageRequest.pageSize = data.limit;
        }
      }

      let this_ = this;
      if (this_.filters == undefined || this_.filters == null) {
        this_.filters = {};
      }
      this_.filters.start = this.pageRequest.pageNum;
      this_.filters.limit = this.pageRequest.pageSize;
      this_.utils.request.getStoreList(this_.filters, function(res) {
        this_.pageResult = res.data.rows;
        this_.totalSize = Number(res.data.total);
      });
    },
    reset() {
      
      let params = {};
      let this_ = this;
      this_.filters =  {}
      params.start = 1;
      params.limit = this.pageRequest.pageSize;
      this_.utils.request.getStoreList(params, function(res) {
        this_.pageResult = res.data.rows;
        this_.totalSize = Number(res.data.total);
      });
    },

    //商家初始化
    queryShopName() {
      var that = this;
      this.utils.request.queryMerchantListOther({}, function(data) {
        that.options = data.data;
      });
    },
    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },

    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
        this.filters.startDate = "";
        this.filters.endDate = "";
        this.filters.storeChannels = "";
        this.findPage(null);
      }
    },

    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      this.columns = [
        { prop: "thirdStoreCode", label: "店铺编号", minWidth: 120 },
        { prop: "storeName", label: "店铺姓名", minWidth: 120 },
        {
          prop: "addressDetail",
          label: "店铺地址	",
          minWidth: 120,
          formatter: function(row, column, cellValue, index) {
            return (
              row.businessProvinceId +
              row.businessCityId +
              row.businessRegionId +
              row.addressDetail
            );
          }
        },
        {
          prop: "",
          label: "组织级别",
          minWidth: 120,
          formatter: function(row, column, cellValue, index) {
            return "店铺";
          }
        },
        {
          prop: "storeTypes",
          label: "店铺类型",
          minWidth: 70,
          formatter: function(row, column, cellValue, index) {
            if (cellValue == 0) {
              return "自营店铺";
            } else {
              return "入驻店铺";
            }
          }
        },
        {
          prop: "childName",
          label: "所属平台",
          minWidth: 70
        },
        {
          prop: "merchantName",
          label: "上级组织",
          minWidth: 70
        },
        { prop: "storeContactor", label: "店铺负责人", minWidth: 120 },

        { prop: "mobile", label: "负责人手机", minWidth: 80 },
        {
          prop: "reviewStatus",
          label: "状态",
          minWidth: 70,
          formatter: function(row, column, cellValue, index) {
            if (cellValue == 0) {
              return "启用";
            }
            if (cellValue == 1) {
              return "停用";
            }
          }
        }
      ];
      var temp = [];

      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },
    //列表下载
    downloadExcel() {
      this.$confirm("确定下载列表文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let filename = "换货管理下载";
          this.$refs.JicTable.exportData(
            this.filters,
            this.filterColumns,
            filename
          );
        })
        .catch(() => {});
    },

    // 模板下载
    downloadTemplate() {
      //原生js下载模板
      var $form = $('<form method="GET"></form>');
      $form.attr("action", "/static/excels/store.xls");
      $form.appendTo($("body"));
      $form.submit();
    },
    //上传成功，失败
    onSuccess(res) {
      console.log(res);
      if (res.code == "0000") {
        this.$message({ message: "导入成功", type: "success" });
        alert(JSON.stringify(res));
      }

      this.findPage();
    },
    onError(err) {
      this.$message({ message: err, type: "fail" });
    },
    //切换条数变化事件
    handleSizeChange(params) {
      console.log(params, "/////");
      if (params != null && params.size != null) {
        this.pageRequest.pageSize = params.size;
      }
      this.findPage();
    }
  },

  mounted() {
    this.initColumns();
    this.findPage();
    this.queryShopName();
    this.initData();
  }
};
</script>

<style scoped lang="scss">
/deep/.distpicker-address-wrapper select {
  padding: 0.5rem 0.75rem;
  height: 34px;
  font-size: 0.8rem;
  width: 290px;
}
</style>
